import { Avatar, Image } from "@arco-design/web-react";
import { IconUser } from "@arco-design/web-react/icon";
import dayjs from "dayjs";
import { useCallback } from "react";
import { useRecoilValue } from "recoil";
import { evaluate } from "../../../../../../../api/ticket";
import { userInfoState } from "../../../../../../../store/userInfo";
import { ConversationInfoListItemType, SendType } from "../../../../../../types/conversation"
import { EvaluateBox } from "../EvaluateBox";

import './index.css';

interface ConversationInfoListItemProps {
  data: ConversationInfoListItemType;
}

export const ConversationInfoListItem: React.FC<ConversationInfoListItemProps> = (props) => {
  const userInfo = useRecoilValue(userInfoState);
  const { data } = props;
  const { send_type, send_user, content, send_time, conversation_id, info_id } = data;

  const onEvaluateChange = useCallback(async (values: number) => {
    const result = await evaluate(Number(conversation_id), values, info_id);

    console.log(result);
  }, []);

  const renderContent = useCallback(() => {
    switch (send_type) {
      case SendType.Evaluate:
        return (
          <EvaluateBox score={Number(content)} onChange={onEvaluateChange} readonly={Number(content) !== 0} />
        )
      case SendType.Img:
        return (
          <>
            <Image style={{ marginRight: '10px', borderRadius: '10px' }} width={200} previewProps={{ style: { zIndex: '9999999' } }} src={content} />
            <div className="conversation-info-list-item-create-time">{dayjs(send_time).format('HH:mm')}</div></>
        )
      case SendType.Text:
      default:
        return (<>
          <div className="conversation-info-list-item-content">{content}</div>
          <div className="conversation-info-list-item-create-time">{dayjs(send_time).format('HH:mm')}</div>
        </>)
    }
  }, []);

  return <div className={send_user.id === userInfo.id ? 'mine-conversation-info conversation-info-list-item' : 'customer-conversation-info conversation-info-list-item'}>
    {/* <img className="conversation-info-list-item-header" src={header_img}></img> */}
    <Avatar className="conversation-info-list-item-header" style={{ backgroundColor: '#3370ff' }}>
      <IconUser />
    </Avatar>
    <div className="conversation-info-list-item-content-wrapper">
      {renderContent()}
    </div>
  </div>
}